import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Serve2.css'
import { Button } from 'antd-mobile'

export default function Serve2() {
    const navigate = useNavigate()
    const [data, setData] = useState([
        {
            name: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            descript: '有三天的咳嗽，发烧，流鼻涕...',
            time: '2023-10-10 10:10:10',
            price: "39.00",
            status: '待支付'
        },
        {
            name: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            descript: '有三天的咳嗽，发烧，流鼻涕...',
            time: '2023-10-10 10:10:10',
            price: "39.00",
            status: '待接诊'
        },
        {
            name: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            descript: '有三天的咳嗽，发烧，流鼻涕...',
            time: '2023-10-10 10:10:10',
            price: "39.00",
            status: '已开药待审核'
        },
        {
            name: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            descript: '有三天的咳嗽，发烧，流鼻涕...',
            time: '2023-10-10 10:10:10',
            price: "39.00",
            status: '处方审核通过'
        },
        {
            name: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            descript: '有三天的咳嗽，发烧，流鼻涕...',
            time: '2023-10-10 10:10:10',
            price: "39.00",
            status: '处方未通过审核'
        },
        {
            name: '张三被',
            position: '副主任医师',
            hospital: '芜湖儿童医院',
            department: '儿科',
            descript: '有三天的咳嗽，发烧，流鼻涕...',
            time: '2023-10-10 10:10:10',
            price: "39.00",
            status: '已取消'
        },
    ])
    return (
        <div className='serve2'>
            <div className='serve2-header'>
                <h1>开药问诊</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="serve2-content">
                {
                    data.map((item, index) => {
                        return <div key={index} className='serve2-content-item'>
                            <h3>{item.name} {item.position}</h3>
                            <span>{item.hospital} {item.department}</span>
                            <p>病情描述:{item.descript}</p>
                            <p>创建时间:{item.time}</p>
                            <p>价格:￥{item.price}</p>
                            <div className='serve2-content-item-status'
                                style={{ color: item.status !== '已取消' && item.status !== '已开药待审核' && item.status !== '处方审核通过' ? 'red' : 'gary' }}
                            >
                                {item.status}
                            </div>
                            <div>
                                {
                                    item.status === '待支付'
                                        ?
                                        <Button>去支付</Button>
                                        :
                                        item.status === '已取消' || item.status === '已开药待审核' || item.status === '处方审核通过'
                                            ?
                                            <Button>删除订单</Button>
                                            :
                                            null
                                }
                            </div>

                        </div>
                    })
                }
            </div>
        </div>
    )
}
